<!DOCTYPE html>
<html>
<head>
  <base href=""/>
  <meta charset="UTF-8">
  <title>站实时状态详情</title>
  <link type="text/css" rel="stylesheet" href="../static/css/bootstrap.min.css"/>
  <link type="text/css" rel="stylesheet" href="../static/css/common.css"/>
  
  <script type='text/javascript' src='../static/js/jquery-1.10.2.min.js'></script>
  <script type='text/javascript' src='../static/js/bootstrap.min.js'></script>
  <script type='text/javascript' src='../static/js/jquery-ui.min.js'></script>
  <script type='text/javascript' src='../static/js/jquery.ui.touch-punch.min.js'></script>
  <script type='text/javascript' src='../static/js/jquery.webcam.min.js'></script>
  <script type="text/javascript" src="../static/js/common.js"></script>
  <script type="text/javascript" src="../static/js/messageContent.js"></script>
  <script type="text/javascript" src="../static/js/page.js"></script>
  <script type='text/javascript' src="../static/js/echarts-all.js"></script>
  <script type='text/javascript' src='../static/js/echarts.js'></script>
  <script type="text/javascript" src="../static/js/chargingStationRealTimeDetail.js"></script>
  <script type='text/javascript' src='../static/table/chargingStationRealTimeDetailTable.js'></script>
</head>
<body>
  <div class="detalisTop">
	  <div class="top" style="padding-left:3%;">
		<h4 class="partTitle"> 
          <span class="detalisBack" onclick="goback();"></span>
          	当前位置: 充电站 <span class="comSpanTitle">></span><a onclick="goback();">实时状态</a><span class="comSpanTitle">></span>详情
        </h4>
	  </div>
	  <div class="blue"></div>
   </div>
  <div class="partDetalis">
  <form class="form-horizontal" id="chargingStationStatusForm" hidden="hidden">
        <input id="page" name = "page" hidden = "hidden" value = "1">
        <input id="rows" name = "rows" hidden = "hidden" value = "15">
    </form>
      <div class="partTable">
      	<div class="col-sm-12 oneWidth">
	        <div class="col-sm-6 AhalfWidth">
              	<div class="comTitle bacLightGreen fontWhite"><span class="borWhite"></span><span id="chargingStationNameTitle">XX充电站</span></div>
              	<div class="comBody bacWhite" id="detailOneBody"></div>
            </div>
            <div class="col-sm-6 AhalfWidth">
              	<div class="comTitle bacWhite"><span class="borBlue"></span>统计信息</div>
              	<div class="comBody bacWhite" style="padding-top:60px;" id="detailTwoBody">
              		<div class="col-sm-4 partTurnPage">
              			<div class="marginBottom2Ten"><img src="../static/images/timePng.png"></div>
              			<div class="marginBottomTen fontOrange"><span style="font-size: 32px;" id="chargingCountDay">-</span>次</div>
              			<div class="marginBottom6Ten">今日总充电次数</div>
              			<div class="marginBottom2Ten" hidden="hidden">与昨日此时此刻相比<span>-</span>%</div>
              		</div>
              		<div class="col-sm-4 partTurnPage borderLeftRightEC">
              			<div class="marginBottom2Ten"><img src="../static/images/cellPng.png"></div>
               			<div class="marginBottomTen fontOrange"><span style="font-size: 32px;" id="chargingDegreeDay">-</span>度</div>
             			<div class="marginBottom6Ten">今日总充电度数</div>
              			<div class="marginBottom2Ten" hidden="hidden">与昨日此时此刻相比<span>-</span>%</div>
              		</div>
              		<div class="col-sm-4 partTurnPage" onclick="showEchart()" title="显示/隐藏实时功率曲线" style="cursor: pointer;">
              			<div class="marginBottom2Ten"><img src="../static/images/powerPng.png"></div>
                			<div class="marginBottomTen fontOrange"><span style="font-size: 32px;" id="currentPowerTotal">-</span>KW</div>
            			<div class="marginBottom6Ten">
            				当前总功率
            				<img src="../static/images/pwrOn.png" id="pwrOn" hidden="hidden"/>
            				<img src="../static/images/pwrOff.png" id="pwrOff"/>
            			</div>
              			<div class="marginBottom2Ten" hidden="hidden">与昨日此时此刻相比<span>-</span>%</div>
              		</div>
              	</div>
            </div>
		</div>
		<div id="echart" class="col-sm-12 oneWidth" hidden="hidden">
		    <div class="col-sm-12 AhalfWidth">
		    	<div class="comTitle bacWhite"><span class="borBlue"></span>功率曲线</div>
              	<div class="bacWhite">
              		<div id="histogram" class="comBody bacWhite"></div>
              	</div>
            </div>
		</div>
		<div class="col-sm-12 oneWidth">
		    <div class="col-sm-12 AhalfWidth">
		    	<div class="comTitle bacWhite"><span class="borBlue"></span>充电桩状态</div>
              	<div class="comBody bacWhite" id="detailTwoBody">
              		<div class="table table-hover">
            			<div id="equipmentDetalisTbody"></div>
          			</div>
              	</div>
            </div>
		</div>
		<div class="col-sm-12 oneWidth">
		    <div class="col-sm-12 AhalfWidth">
		    	<div class="comTitle bacWhite"><span class="borBlue"></span>安防状态</div>
              	<div class="comBody bacWhite" id="detailThreeBody">
              		<div class="table table-hover">
            			<div id="securityTable"></div>
          			</div>
              	</div>
            </div>
		</div>
		<div class="col-sm-12 oneWidth">
		    <div class="col-sm-12 AhalfWidth">
		    	<div class="comTitle bacWhite"><span class="borBlue"></span>车位状态</div>
              	<div class="comBody bacWhite" id="detailFourBody">
              		<div class="table table-hover">
            			<div id="parkTable"></div>
          			</div>
              	</div>
            </div>
		</div>
		<div class="col-sm-12 oneWidth">
	        <div class="col-sm-12 AhalfWidth">
              	<div class="comTitle bacWhite"><span class="borBlue"></span><span id="stationName">机柜实时状态</span></div>
              	<div class="comBody bacWhite">
              		<div class="col-sm-2 minWidth260"><img src="../static/images/equipmentCabinet.png"></div>
            		<div class="col-sm-2 minWidth260" id="detailFiveBody"></div>
               		<div class="col-sm-2 minWidth260" id="detailSixBody"></div>
              		<div class="col-sm-2 minWidth260" id="detailSevenBody"></div>
              		<div class="col-sm-2 minWidth260" id="detailEightBody"></div> 
              	</div>
            </div>
		</div>
      </div>
  </div>
  <div aria-hidden="true" id="camera" data-backdrop="static" tabindex="-1" class="modal fade popup">
    <div id="cameraDialog" class="popupCamera" data-index="1">
       <div class="modal-header cameraHeader">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" class="close">&times;</span>
        </button>
        <h4 class="modal-title"><span id="cameraTitle" class="cameraTitle"></span></h4>
       </div>
       <div class="modal-body cameraBody">
          <div id="camera1"></div>
       </div>
       <div class="modal-footer cameraFooter">
        <button type="button" class="btn btn-danger" onclick="exitHikvision()">
          <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> 关闭
        </button>
        <button type="button" class="btn btn-success" onclick="capture()">
          <span class="glyphicon glyphicon-camera" aria-hidden="true"></span> 拍照
        </button>
        <button id="saveImageBtn" type="button" class="btn btn-success" onclick="saveImage()">
          <span class="glyphicon glyphicon-save" aria-hidden="true"></span> 保存
        </button>
       </div>
       <canvas id="canvas" width="320" height="240"></canvas>
  </div>
  </div>
</body>
</html>